<template>
	<el-container id="home" class="page-container">
		<!-- 侧边导航菜单 -->
		<el-aside :width="menuWidth">
			<el-scrollbar :native="false" class="default-scrollbar" wrap-class="aside-scrollbar-wrap" view-class="default-scrollbar-view">
				<menu-bar></menu-bar>
			</el-scrollbar>
		</el-aside>
		<!-- 嵌套容器 -->
		<el-container class="main-container">
			<!-- 顶栏头部标签 -->
			<el-header height="80">
				<header-bar></header-bar>
			</el-header>
			<!-- Tab标签栏 -->
			<el-tabs class="tabs">
				<nav-tabs @reloadTab="reload" @closeTab="reload"></nav-tabs>
			</el-tabs>
			<!-- 主体页面 -->
			<el-main>
				<div class="main-content">
					<el-scrollbar :native="false" class="default-scrollbar" wrap-class="main-scrollbar-wrap" view-class="default-scrollbar-view">
						<template v-if="isRouterAlive">
							<keep-alive>
								<router-view :key="this.$route.fullPath" ref="routeView" @reloadView="reload"></router-view>
							</keep-alive>
						</template>
						<template v-else>
							<router-view :key="this.$route.fullPath" ref="routeView" @reloadView="reload"></router-view>
						</template>
					</el-scrollbar>
				</div>
			</el-main>
			<!-- 底栏版权信息 -->
			<el-footer style="height: 30px;">
				<footer-bar></footer-bar>
			</el-footer>
		</el-container>
	</el-container>
</template>

<script>
export default {
	name: "home-page",
	inject: ["reload"],
	provide() { // 注册一个方法
		return {
			reload: this.reload
		};
	},
	data() {
		return {
			routes: [],
			timer: null, // 定时器ID
			isRouterAlive: this.$route.meta.isKeepAlive
		};
	},
	created() {
		this.getRoutes();
	},
	methods: {
		reload() {
			this.isRouterAlive = false;
			this.$nextTick(() => {
				this.isRouterAlive = true;
				if (this.envMode !== "production" && performance.memory.usedJSHeapSize > 600 * 1048576) { //chrome78 1G内存限制
					this.message.info("内存占用太大，即将自动刷新页面！");
					this.$parent.reloadRoute();
					this.timer = setTimeout(() => {
						if (this.envMode !== "production" && performance.memory.usedJSHeapSize > 600 * 1048576) { //chrome78 1G内存限制
							this.message.info("内存占用太大，即将自动刷新页面！");
							location.reload();
						}
					}, 5000);
				}
			});
		},
		getRoutes() {
			let homePage = {};
			let routes = this.$router.options.routes;
			for (let route of routes) {
				if (route.name === "home-page") {
					homePage = route;
					break;
				}
			}
			this.routes = homePage.children;
		}
	},
	//获取当前页面滚动条纵坐标的位置
	handleScroll() {
		//IE9及以上：可以使用 window.pageYOffset 或者 document.documentElement.scrollTop
		//safari： window.pageYOffset 与 document.body.scrollTop都可以
		//Chrome：谷歌浏览器只认识 document.body.scrollTop;
		let scrollTop = document.body.scrollTop || window.pageYOffset || document.documentElement.scrollTop;
		console.log(scrollTop);
	},
	deactivated() {
		// 移除任何你不想保留的数据，或者销毁可能产生内存泄漏的地方
		console.log(this.$refs.routeView);
	},
	beforeDestroy() {
		if (this.timer) {
			clearTimeout(this.timer); // 在Vue实例销毁前，清除我们的定时器
		}
	}
};
</script>
<style scoped>
.page-container {
	height: calc(100vh);
}

aside {
	height: calc(100vh);
	text-align: center;
	background-color: #304156;
}

.main-container {
	height: calc(100vh);
	width: 100%;
	background-color: #B7D2EE;
}

header {
	width: 100%;
	padding-left: 10px;
	padding-right: 5px;
}

.tabs {
	background-color: #F5F5F5;
	height: 40px;
	width: 100%;
	display: flex;
}

.tabs >>> .el-tabs__header {
	margin-bottom: -3px;
	border-bottom-width: 0;
}

main {
	width: 100%;
	height: 100%;
	text-align: center;
	padding: 8px;
	display: flex;
}

.main-content {
	height: 100%;
	width: 100%;
}

footer {
	width: 100%;
	color: black;
	text-align: center;
	background-color: #B7D2EE;
}

.default-scrollbar {
	height: 100%;
	width: 100%;
}

.page-container >>> .el-scrollbar__wrap {
	overflow-y: auto;
	overflow-x: hidden;
}

.page-container >>> .aside-scrollbar-wrap {
	overflow-y: auto;
	overflow-x: hidden;
	/*将水平滚动条挤到可视区域之外*/
	height: calc(100vh - 17px);
	/*将垂直滚动条挤到可视区域之外*/
}

.page-container >>> .main-scrollbar-wrap {
	overflow-y: auto;
	overflow-x: hidden;
	/*将水平滚动条挤到可视区域之外*/
	height: calc(100vh - 80px - 40px);
	/*将垂直滚动条挤到可视区域之外*/
}

.page-container >>> .el-scrollbar__thumb {
	border-radius: inherit;
	background: #4774E5;
}

.page-container >>> .el-scrollbar__thumb:hover {
	background: #4774E5;
	cursor: pointer;
}

.page-container >>> .default-scrollbar-view {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
</style>
